<template>
    <div class="container">
        <Alert>
            <Form :model="searchObj" inline>
                <FormItem>
                    <Button class="search-btn" type="primary" @click="addAction">
                        <Icon type="ios-add"/>
                        添加
                    </Button>
                </FormItem>
            </Form>
        </Alert>
        <Row>
            <vxe-toolbar custom></vxe-toolbar>
            <vxe-table
                    ref="xTable"
                    border
                    resizable
                    highlight-hover-row
                    height="500"
                    size="medium"
                    show-overflow="tooltip"
                    :loading="tableLoading"
                    align="center"
                    header-align="center"
                    @checkbox-all="selectAllEvent"
                    @checkbox-change="selectChangeEvent"
                    :sort-config="{trigger: 'cell'}"
                    :data="tableData">
<!--                <vxe-table-column type="checkbox" width="60"></vxe-table-column>-->
                <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
                <vxe-table-column :field="item.key" :title="item.title" min-width="120"
                                  v-for="(item,index) in tableColumns" :key="index">
                </vxe-table-column>
                <vxe-table-column field="action" title="操作" width="400">
                    <template v-slot="{row}">
                        <ButtonGroup>
                            <Button type="primary" size="small" class="action-btn"
                                    @click="editAction(row)">编辑
                            </Button>
                            <Button type="error" size="small" class="action-btn"
                                    @click="delAction(row.id)">删除
                            </Button>
                        </ButtonGroup>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </Row>
        <br>
        <Row type="flex" justify="end">
            <Page show-sizer show-total :current="pageObj.pageNo" :page-size="pageObj.pageSize"
                  :total="pageObj.totalRecord"
                  @on-change="getPageNo" :page-size-opts="[10,20,50,100]" @on-page-size-change="pageSizeChange"/>
        </Row>
        <br>
        <Modal style="text-align: center" v-model="modalShow" width="360">
            <Input v-model="insertName" placeholder="请输入单位名称" style="margin-top: 20px"/>
            <div slot="footer">
                <Button type="error" size="large" long :loading="insertLoading" @click="insertAction">保存</Button>
            </div>
        </Modal>
        <Modal style="text-align: center" v-model="updateShow" width="360">
            1
            <Input v-model="updateName" placeholder="请输入单位名称" style="margin-top: 20px"/>
            <div slot="footer">
                <Button type="error" size="large" long :loading="updateLoading" @click="updateAction">保存</Button>
            </div>
        </Modal>
        <Modal v-model="delMultiModal" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>删除确认</span>
            </p>
            <div style="text-align:center">
                <p>此任务将删除{{this.num.length}}条数据</p>
                <p>是否继续删除？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="delMultiLoading" @click="delSubmit">删除</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
  goodsUnitServiceList,
  goodsUnitServiceInsert,
  goodsUnitServiceDelete,
  goodsUnitServiceUpdate
} from '@/api/shop'
import dict from '@/libs/dict'

export default {
  data () {
    return {
      delMultiLoading: false,
      delMultiModal: false,
      modalShow: false,
      modalTitle: '',
      modalWidth: 500,
      modalType: '',
      num: [],
      insertName: '',
      insertLoading: false,
      updateName: '',
      updateId: '',
      updateLoading: false,
      updateShow: false,
      modalData: {},
      tableColumns: [
        {
          title: '单位名称',
          key: 'name',
          tooltip: true,
          width: 300,
          align: 'center'
        }
      ],
      tableData: [],
      selectData: [],
      tableLoading: false,
      pageObj: {
        pageNo: 1,
        pageSize: 20,
        totalRecord: 0
      },
      searchObj: {},
      datasrc: null,
      resetModel: false,
      resetLoading: false,
      downImgModel: false,
      downLoading: false,
      downNowName: '',
      selectList: [],
      organizationList: [],
      placeTypeList: dict.placeCategory,
      downloadType: 'default'
    }
  },
  props: {},
  mounted () {
    this.init()
  },
  computed: {
    company_code () {
      return this.$store.state.user.severUserInfo.data.company_code
    }
  },
  methods: {
    updateAction () {
      if (this.updateName === '' || this.updateName === null || this.updateName === undefined) {
        this.$Message.error('请输入单位名称')
        return false
      }
      this.updateLoading = true
      goodsUnitServiceUpdate({ name: this.updateName, id: this.updateId }).then(res => {
        let data = res.data
        if (data.errcode === 0) {
          this.init()
          this.updateLoading = false
          this.updateShow = false
          this.success('修改成功')
        } else {
          this.error(data)
        }
      })
    },
    insertAction () {
      if (this.insertName === '' || this.insertName === null || this.insertName === undefined) {
        this.$Message.error('请输入单位名称')
        return false
      }
      this.insertLoading = true
      goodsUnitServiceInsert({ name: this.insertName }).then(res => {
        let data = res.data
        if (data.errcode === 0) {
          this.init()
          this.insertLoading = false
          this.modalShow = false
          this.success('添加成功')
        } else {
          this.error(data)
        }
      })
    },
    delSubmit () {
      this.delMultiLoading = true
      deletePlacePL({ dataList: this.num }).then(res => {
        let data = res.data
        if (data.errcode === 0) {
          this.init()
          this.delMultiLoading = false
          this.delMultiModal = false
          this.success('删除成功')
        } else {
          this.error(data)
        }
      })
    },
    selectAllEvent (row) {
      this.num = row.selection
    },
    delPLAction () {
      if (this.num.length <= 0) {
        this.$Message.error('请选择要删除的数据')
      } else {
        this.delMultiModal = true
      }
    },
    selectChangeEvent (row) {
      this.num = row.selection
      // console.log(row.selection)
    },
    importExcel () {
      this.$router.push({
        name: 'placeExcel',
        query: { type: 'place' }
      })
    },
    cancelOption () {
      this.modalShow = false
    },
    saveOption () {
      this.modalShow = false
      this.init()
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getPageNo (pageNo) {
      this.pageObj.pageNo = pageNo
      this.init()
    },
    pageSizeChange (e) {
      this.pageObj.pageSize = e
      this.init()
    },
    tableSelectChange (val) {
      this.selectData = val
    },
    initPage () {
      this.pageObj.pageNo = 1
      // this.pageObj.pageSize = 20
    },
    init (data) {
      const obj = {
        pageNo: this.pageObj.pageNo,
        pageSize: this.pageObj.pageSize
      }
      let param = data || obj
      this.tableLoading = true
      goodsUnitServiceList(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.tableData = data.data.result
          this.pageObj.totalRecord = data.data.totalRecord
        } else {
          this.tableLoading = false
          this.error(data)
        }
      })
    },
    searchAction () {
      this.initPage()
      this.init()
    },
    addAction () {
      this.modalTitle = '添加'
      this.modalType = 'add'
      this.modalWidth = 650
      this.modalData = {}
      this.modalShow = true
    },
    editAction (val) {
      this.updateName = val.name
      this.updateId = val.id
      this.updateShow = true
    },
    infoAction (val) {
      this.modalTitle = '查看详情'
      this.modalType = 'info'
      this.modalWidth = 800
      this.modalData = this.$common.xeUtils.clone(val)
      this.$refs.optionModal.getBindList(val)
      this.modalShow = true
    },
    delAction (val) {
      this.$Modal.confirm({
        title: '确认删除么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.deleteOne(val)
        }
      })
    },
    resetAction () {
      this.resetModel = true
    },
    deleteOne (val) {
      goodsUnitServiceDelete({ id: val }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.init()
          this.success('删除成功')
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    }
  }

}
</script>

<style scoped>
    .container {
        padding-bottom: 50px;
    }

    .action-btn {
        margin-right: 5px;
        /*margin-bottom: 5px;*/
    }

    .search-input {
        /*width: 180px;*/
    }

    .search-btn {
        /*width: 100px;*/
    }

    /deep/ .ivu-divider-horizontal {
        margin: 12px 0;
    }

    /deep/ .ivu-form-item {
        margin-bottom: 6px;
    }

    /deep/ .ivu-btn-group .ivu-btn {
        border-radius: 3px !important;
    }
</style>
